<template>
    <div class="search-results-panel" v-show="visible">
      <div class="panel-header">
        <h3>搜索结果 ({{ results.length }})</h3>
        <el-button type="text" @click="handleClose">×</el-button>
      </div>
      <div class="results-list">
        <div v-for="item in results" 
             :key="item.properties.id" 
             class="result-item"
             @click="handleItemClick(item)">
          <div class="item-name">{{ item.properties.name }}</div>
          <div class="item-category">{{ item.properties.category }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  
  @Component
  export default class SearchResultsPanel extends Vue {
    @Prop({ type: Array, default: () => [] }) readonly results!: any[];
    @Prop({ type: Boolean, default: false }) visible!: boolean;
  
    handleClose() {
      this.$emit('close');
    }
  
    handleItemClick(item: any) {
      this.$emit('item-click', item);
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .search-results-panel {
    position: relative;
    top: 0px;
    left: 0px;
    width: 200px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 2000;
  
    .panel-header {
      padding: 12px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      h3 {
        margin: 0;
        font-size: 12px;
      }
    }
  
    .results-list {
      max-height: 60vh;
      overflow-y: auto;
  
      .result-item {
        padding: 12px;
        font-size: 10px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background 0.3s;
  
        &:hover {
          background: #f5f7fa;
        }
  
        .item-name {
          font-weight: 500;
          color: #303133;
        }
  
        .item-category {
          font-size: 10px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }
  }
  </style>